<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>姓名案例-插值语法实现</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!-- 准备一个容器 -->
        <div id="root">
            姓：<input type="text" v-model="firstName"> <br/>
            名：<input type="text" v-model="lastName"> <br/>
            全名：<span>{{firstName}}-{{lastName}}</span>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
            
            new Vue({
                el:"#root",
                data:{
                    firstName:'张',
                    lastName:'三'
                }
            })
        </script>
        
    </body>
</html>